<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="年度">
              <!-- <a-date-picker v-model="queryParam.shijian" /> -->
              <a-date-picker
                style="width:100%"
                :open="yearShowOne"
                @openChange="openChangeOne"
                @panelChange="panelChangeOne"
                mode="year"
                format="YYYY"
                type="date"
                :default-value="moment(new Date(), 'YYYY')"
                v-model="queryParam.shijian"
                suffix-icon=" "
                placeholder="年份"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="成果类别">
              <a-select v-model="queryParam.flid" placeholder="请选择成果类别">
                <a-select-option v-for="(item, index) in cxjSbList" :key="index" :value="item.fl_bh">{{
                  item.fl_mc
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="奖项">
              <!-- <a-input placeholder="请选择奖项" v-model="queryParam.cxj_mc_zw"></a-input> -->
              <a-select v-model="queryParam.jxdj" placeholder="请选择奖项等级">
                <a-select-option :value="0">特等奖</a-select-option>
                <a-select-option :value="1">一等奖</a-select-option>
                <a-select-option :value="2">二等奖</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="关键词">
              <a-input placeholder="请填写关键词" v-model="queryParam.gjc"></a-input>
            </a-form-item>
          </a-col>
          <a-col :sm="8">
            <a-form-item label="">
              <a-button style="margin-right:10px;" type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button style="margin-right:10px;" type="primary" @click="searchReset" icon="reload">重置</a-button>
              <a-button type="primary" @click="handleImport" icon="search">导入</a-button>
              <input
                type="file"
                style="display:none;"
                class="pointer fscg"
                id="fscg"
                accept=".xls,.xlsx"
                @change="handleUploadfscg"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="xm_hjdj_show" slot-scope="text, record">
          <a-select
            v-if="record.isEdit"
            v-model="record.xm_hjdj_show"
            placeholder="请选择奖项等级"
            style="width:100%"
            @change="getJxdjOption($event, record)">
            <a-select-option v-for="(item, index) in jxdjList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <span v-else @click="clickJX(text, record)">{{ text }}</span>
        </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>
      </a-table>
    </div>

    <cxj-wysd-xm-modal ref="modalForm" @ok="modalFormOk"></cxj-wysd-xm-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CxjWysdXmModal from './modules/CxjWysdXmModal'
import { filterObj } from '@/utils/util'
import moment from 'moment'
import { sysCxjFlCxjsbList } from '@/api/api'
import { getAction, cxjwysd_tpxmlist_import, cxjdjpsChangeAwards } from '@/api/manage'

export default {
  name: 'CxjWysdXmList',
  // mixins:[JeecgListMixin, mixinDevice],
  components: {
    CxjWysdXmModal
  },
  data() {
    return {
      description: '委员审定投票项目表管理页面',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '成果编号',
          align: 'center',
          dataIndex: 'cxj_xmbh'
        },
        {
          title: '成果名称',
          align: 'center',
          dataIndex: 'cxj_mc_zw'
        },
        {
          title: '申报单位',
          align: 'center',
          dataIndex: 'sbdw_qymc'
        },
        {
          title: '推荐单位',
          align: 'center',
          dataIndex: 'jttjdw_mc'
        },
        {
          title: '成果类别',
          align: 'center',
          dataIndex: 'fl_mc'
        },
        {
          title: '奖项等级',
          align: 'center',
          width: 120,
          dataIndex: 'xm_hjdj_show',
          scopedSlots: { customRender: 'xm_hjdj_show' }
        }
      ],
      url: {
        list: '/cxj/cxjWysdXm/cxjwysd_tpcgList',
        delete: '/cxj/cxjWysdXm/delete',
        deleteBatch: '/cxj/cxjWysdXm/deleteBatch',
        exportXlsUrl: '/cxj/cxjWysdXm/exportXls',
        importExcelUrl: 'cxj/cxjWysdXm/importExcel'
      },
      dictOptions: {},
      superFieldList: [],

      /* 年份参数开始 */
      yearShowOne: false,
      shijian: moment(new Date()).format('YYYY'),
      /* 年份参数结束 */
      /* 列表参数开始 */
      queryParam: {},
      dictOptions: {},
      superFieldList: [],
      fileStatus: '',
      selectedRowKeys: [],
      selectionRows: [],
      loading: false,
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 列表参数结束 */
      cxjSbList: [],
      jxdjList: [
        {
          value: 0,
          label: '特等奖'
        },
        {
          value: 1,
          label: '一等奖'
        },
        {
          value: 2,
          label: '二等奖'
        }
      ],
      jxdjId: null,
      jxdjName: null
    }
  },
  created() {
    this.getSuperFieldList()
    this.getsysCxjFlCxjsbList()
    this.loadData()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    moment,
    getJxdjOption(val, record) {
      let obj = {};
      obj = this.jxdjList.find((item)=>{
       return item.value === val;
      });
      let jxdjName = obj.label;
      let that = this
      cxjdjpsChangeAwards({
        id: record.id,
        xmHjdj: val,
        xmHjdjShow: jxdjName
      }).then(res => {
        if (res.code = 200) {
          record.isEdit = 1
          that.$message.success(res.message)
          this.loadData()
        } else {
          record.isEdit = 0
          that.$message.error(res.message)
          this.loadData()
        }
      })
    },
    clickJX(val, record) {
      this.dataSource.forEach(k => {
          k.isEdit = false
      })
      record.xm_hjdj_show = val;
      this.$set(record, 'isEdit', true);
    },
    // 导入
    handleImport() {
      const choosefile = document.querySelector('#fscg')
      choosefile.click()
    },
    handleUploadfscg() {
      let that = this
      const files = document.getElementById('fscg').files[0]
      console.log('24234234324', files)
      if (files) {
        let formData = new FormData()
        formData.append('file', files)
        cxjwysd_tpxmlist_import(formData)
          .then(res => {
            let data = res.data
            if (ResizeObserver.success) {
              document.getElementById('fscg').value = null
              that.$message.success('上传成功')
              that.loadData()
            } else {
              that.$message.error(res.message)
              that.loadData()
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    /* 获取成果类别开始 */
    getsysCxjFlCxjsbList() {
      sysCxjFlCxjsbList(null).then(res => {
        if (res.success) {
          this.cxjSbList = res.result
        }
      })
    },
    /* 获取列表固定格式开始 */
    getQueryField() {
      //TODO 字段权限控制
      var str = 'id,'
      this.columns.forEach(function(value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    // 获取分组项目
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      this.loading = true
      // 分组id
      getAction(this.url.list, params).then(res => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          let data = res.result.records || res.result
          data.forEach(k => {
            k.isEdit = false
          })
          this.dataSource = data
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData()
      //清空列表选中
      this.onClearSelected()
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },

    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      this.queryParam.shijian = this.shijian
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    handleAdd: function() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    searchQuery() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = {}
      // this.flid = "";
      this.shijian = moment(new Date()).format('YYYY')
      this.queryParam.shijian = this.shijian
      this.loadData(1)
    },
    /* 获取列表固定格式结束 */
    /* 年份控制开始 */
    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      // params.shijian = value;
      this.shijian = moment(value).format('YYYY')
      this.queryParam.shijian = this.shijian
      this.yearShowOne = false
    },
    /* 年份控制结束 */
    initDictConfig() {},
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'cxjCxjId', text: '成果ID', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxjXmbh', text: '成果编号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxjXmlb', text: '成果类别', dictCode: '' })
      fieldList.push({ type: 'int', value: 'xmXh', text: '序号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'xmHjdj', text: '获奖等级', dictCode: '' })
      fieldList.push({ type: 'string', value: 'xmHjdjShow', text: '显示获奖等级', dictCode: '' })
      fieldList.push({ type: 'double', value: 'dfCs', text: '初审得分', dictCode: '' })
      fieldList.push({ type: 'double', value: 'dfFs', text: '复审得分', dictCode: '' })
      fieldList.push({ type: 'double', value: 'dfZdf', text: '总得分', dictCode: '' })
      fieldList.push({ type: 'string', value: 'xmZt', text: '项目状态', dictCode: '' })
      fieldList.push({ type: 'string', value: 'isValid', text: '是否有效', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shijian', text: '时间', dictCode: '' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
